<template>
  <div>
    <Card dis-hover class="bgd-content">
      <div slot="title">
          <div class="filtr-inline">
            <span>审核状态：</span>
            <Select v-model="form.status" style="width:140px">
                <Option v-for="item in role" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>
          <div class="filtr-inline">
            <span>公司名：</span><i-input v-model="form.name" placeholder="请输入..." style="width: 140px"></i-input>
          </div>
          <div class="filtr-inline">
              <Button type="primary" @click="getList">搜索</Button>
          </div>
      </div>
      <div>
        <Table :loading="loading" :columns="columns" :data="data"></Table>
      </div>
    </Card>
    <div class="page-block">
      <Page :total="total" :current="form.page" @on-change="onChangePage"></Page>
    </div>

    <!-- 查看 -->
    <Modal v-model="look" width="700" footer-hide title="审核信息">
        <p slot="header" style="text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>审核信息</span>
        </p>

        <Steps :current="row.status - 1" :status="row.status == 3 ? 'error' : 'success'">
            <Step title="未提交" content="提交加盟申请信息"></Step>
            <Step title="进行中" content="正在进行加盟申请审核"></Step>
            <Step v-if="row.status == 3" title="审核失败" content="审核结果"></Step>
            <Step v-else title="审核完成" content="审核结果"></Step>
        </Steps>

        <div class="bgd-cotent">
            <div class="bgd-row">
                <div>
                    <h3>基本信息</h3>
                    <div class="row">
                        <span>公司名称：</span><p>{{row.name}}</p>
                    </div>
                    <div class="row">
                        <span>加盟费：</span><p>{{row.franchise}}元</p>
                    </div>
                    <div class="row">
                        <span>地址：</span><p>{{row.location}}</p>
                    </div>
                    <div class="row">
                        <span>到期时间：</span><p>{{row.expire}}</p>
                    </div>
                </div>

                <div>
                  <h3>联系信息</h3>
                    <div class="row">
                        <span>姓名：</span><p>{{row.lxname}}</p>
                    </div>
                    <div class="row">
                        <span>职位：</span><p>{{row.position}}元</p>
                    </div>
                    <div class="row">
                        <span>手机：</span><p>{{row.mobile}}</p>
                    </div>
                    <div class="row">
                        <span>邮件：</span><p>{{row.email}}</p>
                    </div>
                    <div class="row">
                        <span>QQ：</span><p>{{row.qq}}</p>
                    </div>
                    <div class="row">
                        <span>地址：</span><p>{{row.address}}</p>
                    </div>
                </div>
            </div>

            <div class="bgd-row">
                <div>
                    <h3>附件信息</h3>
                    <div class="row">
                        <span>附件下载：</span><p><a download="图片"  target="_blank" :href="'http://' + row.accessory">附件</a></p>
                    </div>
                </div>

                <div>
                    <h3>其它信息</h3>
                    <div class="row">
                        <span>录入员工：</span><p>{{row.create_user}}</p>
                    </div>
                </div>
            </div>
            <div>
                <h3>审核意见</h3>
                <div class="row" v-for="item in yj" :key="item.id">
                    <span>意见：</span><p>{{item.content}} -- {{item.create_time}}</p>
                </div>
                <div class="row" v-if="!yj.length"><span>暂无</span></div>
            </div>

            <div v-if="footerShow" slot="footer" style="text-align:center">
                <Button type="success" size="large" :loading="ok" @click="onClickOkInfo">提交申请</Button>
            </div>
            <div v-if="footerShowUpdate" slot="footer" style="text-align:center">
                <Button type="success" size="large" @click="onClickOk">修改信息</Button>
            </div>
        </div>
    </Modal>
  </div>
</template>
<script>
import { _getList, _delData, _getYj, _checkIn } from '@/api/alliance.js'
export default {
  name: 'custAdmin',
  data () {
    return {
      look: false,
      footerShow: false,
      footerShowUpdate: false,
      ok: false, // ok 状态
      row: {},
      yj: [],
      loading: true,
      total: 0,
      id: 0,
      form: {
        status: 1,
        name: '',
        page: 1
      },
      // 提交保存数据
      formBase: {
        id: '',
        name: '',
        position: ''
      },
      role: [
        {
          id: 1,
          name: '未提交'
        },
        {
          id: 2,
          name: '审核中'
        },
        {
          id: 3,
          name: '审核失败'
        },
        {
          id: 4,
          name: '正常客户'
        }
      ],
      columns: [
        {
            title: '加盟商',
            key: 'name'
        },
        {
            title: '加盟费',
            key: 'franchise',
            render: (h, params) => {
                return h('div', {}, params.row.franchise + '元')
            }
        },
        {
            title: '到期时间',
            key: 'expire',
            width: 110
        },
        {
            title: 'QQ',
            key: 'qq'
        },
        {
            title: '电话',
            key: 'mobile'
        },
        {
            title: '邮件',
            key: 'email'
        },
        {
          title: '提交人',
          key: 'create_user',
          width: 80
        },
        {
            title: '审核状态',
            key: 'status',
            width: 100,
            render: (h, params) => {
                if (params.row.status == 1){
                    return h('tag', {
                        props: {
                            color: 'default'
                        }
                    }, '未提交')
                }else if (params.row.status == 3){
                    return h('tag', {
                        props: {
                            color: 'error'
                        }
                    }, '未通过')
                }else if (params.row.status == 2){
                    return h('tag', {
                        props: {
                            color: 'success'
                        }
                    }, '审核中')
                }else {
                    return h('tag', {
                        props: {
                            color: 'success'
                        }
                    }, '正常')
                }
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (h, params) => {
                // 查看
                if (params.row.status != 1 && params.row.status != 2 && params.row.status != 4 ){
                    return h('div', [
                        h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    if (params.row.status == 3){
                                        this.footerShowUpdate = true
                                        this.footerShow = false
                                    }else {
                                        this.footerShowUpdate = false
                                        this.footerShow = false
                                    }
                                    this.look = true
                                    this.row = params.row
                                    this.getYj(params.row.id)
                                }
                            }
                        }, '查看'),
                        h('Button', {
                            props: {type: 'error', size: 'small'},
                        }, [
                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    transfer: true,
                                    placement: 'left-end',
                                    title: '确定要删除吗！',
                                    type: 'error',
                                    size: 'small',
                                },
                                on: {
                                    'on-ok': () => {
                                        _delData({id: params.row.id}).then( res => {
                                            const obj = res.data
                                            if (obj.status == 1){
                                                this.$Message.success(obj.msg);
                                                this.getList()
                                            }else {
                                                this.$Message.error(obj.msg);
                                            }
                                        })
                                    },
                                }
                            }, '删除')
                        ])
                    ]);
                }else {
                    return h('Button', {
                        props: {
                            type: 'primary',
                            size: 'small'
                        },
                        style: {
                            marginRight: '5px'
                        },
                        on: {
                            click: () => {
                                if (params.row.status == 1){
                                    this.footerShow = true
                                    this.footerShowUpdate = false
                                    
                                }else {
                                    this.footerShow = false
                                    this.footerShowUpdate = false
                                }
                                this.look = true
                                this.row = params.row
                                this.getYj(params.row.id)
                            }
                        }
                    }, '查看')
                }
            }
        },
      ],
      data: [],
      items: [] // 存放员工类型
    }
  },
  methods: {
    onChangePage (page) {
      this.form.page = page
      this.getList()
    },
    // 提交审核
    onClickOk (){
        this.look = false
        this.$router.push({
            name: 'custApply',
            path: '/alliance/custApply',
            params: {id: this.row.id}
        })
    },
    onClickOkInfo (){
        this.ok = true
        _checkIn({id: this.row.id}).then(res => {
            const obj = res.data
            if (obj.status == 1){
                this.$Message.success(obj.msg)
            }else {
                this.$Message.error(obj.msg)
            }
            this.ok = false
            this.look = false
            this.getList()
        })
    },
    // 获取意见
    getYj(id) {
        this.yj = []
        _getYj(id).then( res => {
            const obj = res.data
            this.yj = obj.data
        })
    },
    // 获取数据
    getList () {
      this.loading = true
      _getList(this.form).then( res => {
        const obj = res.data.data
        this.total = obj.total
        this.data = obj.data
        this.loading = false
      })
    }
  },
  mounted() {
    this.getList()
  },
}
</script>

<style scoped>
.bgd-cotent h3 {
    margin-top: 30px;
}
.bgd-cotent .row{
    line-height: 40px;
    display: flex;
}
.bgd-cotent .row span {
    width: 80px;
    text-align: right;
    padding-right: 10px;
}
.bgd-row {
    display: flex;
    justify-content: space-between;
}
.bgd-row>div{
    width: 50%;
}
</style>
